<template>
  <div class="bigBox">
    <el-carousel
      ref="carouselRef"
      direction="horizontal"
      indicator-position="none"
      arrow="never"
      :autoplay="true"
      :interval="5000"
      height="200px"
      width="450px"
    >
      <el-carousel-item v-for="item in 1" :key="item">
        <div id="DisasterBearingBodyDataHouse"></div>
      </el-carousel-item>
      <el-carousel-item v-for="item in 1" :key="item">
        <div id="DisasterBearingBodyData"></div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';
const props = defineProps({
  listData: {
    required: true,
    type: Object,
    default: {},
  },
});
const { listData } = toRefs(props);
const houseData = ref([]);
houseData.value = listData.value['0'];
const typeData = ref([]);
typeData.value = listData.value['1'];
function houseChart() {
  echarts.init(document.getElementById('DisasterBearingBodyDataHouse')).dispose();
  let myChart = echarts.init(document.getElementById('DisasterBearingBodyDataHouse'));

  const houseYAxis = houseData.value.map((item) => item.houseNum);
  let option = {
    textStyle: {
      color: "#c0c3cd",
      fontSize: 14,
    },
    toolbox: {
      show: false,
      feature: {
        saveAsImage: {
          backgroundColor: "#031245",
        },
        restore: {},
      },
      iconStyle: {
        borderColor: "#c0c3cd",
      },
    },
    legend: {
      top: 0,
      itemWidth: 8,
      itemHeight: 8,
      icon: "circle",
      left: "center",
      padding: 0,
      textStyle: {
        color: "#c0c3cd",
        fontSize: 14,
        padding: [0, 0, 0, 0],
      },
    },
    color: [
      "#63caff",
      "#49beff",
      "#03387a",
      "#03387a",
      "#03387a",
      "#6c93ee",
      "#a9abff",
      "#f7a23f",
      "#27bae7",
      "#ff6d9d",
      "#cb79ff",
      "#f95b5a",
      "#ccaf27",
      "#38b99c",
      "#93d0ff",
      "#bd74e0",
      "#fd77da",
      "#dea700",
    ],
    grid: {
          left: "0%",
          right: "12%",
          bottom: "15%",
          containLabel: true,
    },
    xAxis: {
      name:'房屋\n用途',
      nameTextStyle:{
          color:'#fff',
          fontSize: 12,
      },
      axisLabel: {
        color: "#c0c3cd",
        fontSize: 14,
        interval: 0,
      },
      axisTick: {
        lineStyle: {
          color: "#384267",
          width: 1,
        },
        show: true,
      },
      splitLine: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: "#384267",
          width: 1,
          type: "dashed",
        },
        show: true,
      },
      data: 
      [
        '城镇 \n住宅',
        '城镇 \n 非住宅',
        '农村住宅\n(独立住宅)',
        '农村住宅\n(集合住宅)',
        '辅助\n用房',
        '农村\n非住宅',
      ],
      type: "category",
    },
    yAxis: {
      nameTextStyle: {
        color: "#c0c3cd",
        padding: [0, 0, 0, 0],
        fontSize: 12,
      },
      axisLabel: {
        color:'rgba(255,255,255,0.5)',
        // color: "#c0c3cd",
        fontSize: 12,
      },
      axisTick: {
        lineStyle: {
          color: "#384267",
          width: 1,
        },
        show: true,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "#384267",
          type: "dashed",
        },
      },
      axisLine: {
        lineStyle: {
          color: "#384267",
          width: 1,
          type: "dashed",
        },
        show: false,
      },
      name:'房屋数量/百万栋',
      nameTextStyle:{
          color:'#fff',
          padding:[0,0,0,60]
      },
      algin:'left',
      max: 300,
    },
    series: [
      {
        data: houseYAxis,
        type: "bar",
        showBackground: true,
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
        barMaxWidth: "auto",
        barWidth: 30,
        itemStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: "linear",
            global: false,
            colorStops: [
              {
                offset: 0,
                color: "#0b9eff",
              },
              {
                offset: 1,
                color: "#63caff",
              },
            ],
          },
        },
        label: {
          show: true,
          position: "top",
          distance: 10,
          color: "#fff",
        },
      },
      {
        data: houseYAxis,
        type: "pictorialBar",
        barMaxWidth: "20",
        symbolPosition: "end",
        symbol: "diamond",
        symbolOffset: [0, "-50%"],
        symbolSize: [30, 12],
        zlevel: 2,
      },
    ],
    tooltip: {
      trigger: "axis",
      show: false,
    },
  };
  // let option = {
  //   textStyle: {
  //     color: '#c0c3cd',
  //     fontSize: 12,
  //   },
  //   toolbox: {
  //     show: false,
  //     feature: {
  //       saveAsImage: {
  //         backgroundColor: '#031245',
  //       },
  //       restore: {},
  //     },
  //     iconStyle: {
  //       borderColor: '#c0c3cd',
  //     },
  //   },
  //   legend: {
  //     top: 0,
  //     itemWidth: 8,
  //     itemHeight: 8,
  //     icon: 'circle',
  //     left: 'center',
  //     textStyle: {
  //       color: '#c0c3cd',
  //       fontSize: 12,
  //       padding: [0, 0, 0, 0],
  //     },
  //   },
  //   grid: {
  //     left: "5%",
  //     right: "12%",
  //     bottom: "10%",
  //     containLabel: true,
  //   },
  //   color: [],
  //   xAxis: {
  //     axisLabel: {
  //       color:'#fff',
  //       fontSize: 12,
  //       interval: 0,
  //     },
  //     axisTick: {
  //       lineStyle: {
  //         color: '#384267',
  //         width: 1,
  //       },
  //       show: true,
  //     },
  //     splitLine: {
  //       show: false,
  //     },
  //     axisLine: {
  //       lineStyle: {
  //         color: '#384267',
  //         width: 1,
  //         type: 'dashed',
  //       },
  //       show: true,
  //     },
  //     data: [
  //       '城镇 \n住宅',
  //       '城镇 \n 非住宅',
  //       '农村住宅\n(独立住宅)',
  //       '农村住宅\n(集合住宅)',
  //       '辅助\n用房',
  //       '农村\n非住宅',
  //     ],
  //     type: 'category',
  //     name:'房屋\n用途',
  //     nameTextStyle:{
  //         color:'#fff',
  //         fontSize: 12,
  //     }
  //   },
  //   yAxis: {
  //     nameTextStyle: {
  //       color: '#c0c3cd',
  //       padding: [0, 0, 0, 0],
  //       fontSize: 12,
  //     },
  //     axisLabel: {
  //       color:'rgba(255,255,255,0.5)',
  //       fontSize: 12,
  //     },
  //     axisTick: {
  //       lineStyle: {
  //         color: '#384267',
  //         width: 1,
  //       },
  //       show: true,
  //     },
  //     splitLine: {
  //       show: true,
  //       lineStyle: {
  //         color: '#384267',
  //         type: 'dashed',
  //       },
  //     },
  //     axisLine: {
  //       lineStyle: {
  //         color: '#384267',
  //         width: 1,
  //         type: 'dashed',
  //       },
  //       show: false,
  //     },
  //     name:'房屋数量/百万栋',
  //     nameTextStyle:{
  //         color:'#fff',
  //         padding:[0,0,0,30]
  //     },
  //     algin:'left',
  //     max: 300,
  //   },
  //   series: [
  //     {
  //       data: houseYAxis,
  //       type: 'bar',
  //       showBackground: true,
  //       backgroundStyle: {
  //         color: 'rgba(180, 180, 180, 0.2)',
  //       },
  //       barMaxWidth: 'auto',
  //       barWidth: 30,
  //       itemStyle: {
  //         color: {
  //           x: 0,
  //           y: 0,
  //           x2: 0,
  //           y2: 1,
  //           type: 'linear',
  //           global: false,
  //           colorStops: [
  //             {
  //               offset: 0,
  //               color: '#0b9eff',
  //             },
  //             {
  //               offset: 1,
  //               color: '#63caff',
  //             },
  //           ],
  //         },
  //       },
  //       label: {
  //         show: true,
  //         position: 'top',
  //         distance: 10,
  //         color: '#fff',
  //       },
  //     },
  //     {
  //       data: houseYAxis,
  //       type: 'pictorialBar',
  //       barMaxWidth: '20',
  //       symbolPosition: 'end',
  //       symbol: 'diamond',
  //       symbolOffset: [0, '-50%'],
  //       symbolSize: [30, 12],
  //       zlevel: 2,
  //     },
  //   ],
  //   tooltip: {
  //     trigger: 'axis',
  //     show: false,
  //   },
  // };
  myChart.setOption(option);
  window.onresize = function () {
    // 自适应大小
    myChart.resize();
  };
}

function typeChart() {
  echarts.init(document.getElementById('DisasterBearingBodyData')).dispose();
  let myChart = echarts.init(document.getElementById('DisasterBearingBodyData'));

  const typeYAxis = typeData.value.map((item) => item.area);
  let option = {
    textStyle: {
      color: '#c0c3cd',
      fontSize: 12,
    },
    toolbox: {
      show: false,
      feature: {
        saveAsImage: {
          backgroundColor: '#031245',
        },
        restore: {},
      },
      iconStyle: {
        borderColor: '#c0c3cd',
      },
    },
    legend: {
      top: 0,
      itemWidth: 8,
      itemHeight: 8,
      icon: 'circle',
      left: 'center',
      padding: 0,
      textStyle: {
        color: '#c0c3cd',
        fontSize: 12,
        padding: [0, 0, 0, 0],
      },
    },
    grid: {
      left: "5%",
      right: "12%",
      bottom: "10%",
      containLabel: true,
    },
    color: [
      "#63caff",
      "#49beff",
      "#03387a",
      "#03387a",
      "#03387a",
      "#6c93ee",
      "#a9abff",
      "#f7a23f",
      "#27bae7",
      "#ff6d9d",
      "#cb79ff",
      "#f95b5a",
      "#ccaf27",
      "#38b99c",
      "#93d0ff",
      "#bd74e0",
      "#fd77da",
      "#dea700",
    ],
    xAxis: {
      nameTextStyle: {
        color: '#c0c3cd',
        padding: [0, 0, -10, 0],
        fontSize: 12,
      },
      axisLabel: {
        color: ' #fff',
        fontSize: 12,
        interval: 0,
      },
      axisTick: {
        lineStyle: {
          color: '#384267',
          width: 1,
        },
        show: true,
      },
      splitLine: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: '#384267',
          width: 1,
          type: 'dashed',
        },
        show: true,
      },
      data: [
        '钢结构',
        '钢筋\n混凝土结构',
        '砌体结构\n/砖石结构',
        '木结构',
        '其他结构',
      ],
      type: 'category',
      name:'结构\n类型',
      nameTextStyle:{
          color:'#fff'
      }
    },
    yAxis: {
      axisLabel: {
        color: '#c0c3cd',
        fontSize: 12,
      },
      axisTick: {
        lineStyle: {
          color: '#384267',
          width: 1,
        },
        show: true,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: '#384267',
          type: 'dashed',
        },
      },
      axisLine: {
        lineStyle: {
          color: '#384267',
          width: 1,
          type: 'dashed',
        },
        show: false,
      },
      name:'建筑面积10^8',
      nameTextStyle:{
          color:'#fff'
      },
      max: 5000,
    },
    series: [
      {
        data: typeYAxis,
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)',
        },
        barMaxWidth: 'auto',
        barWidth: 30,
        itemStyle: {
          color: {
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            type: 'linear',
            global: false,
            colorStops: [
              {
                offset: 0,
                color: '#0b9eff',
              },
              {
                offset: 1,
                color: '#63caff',
              },
            ],
          },
        },
        label: {
          show: true,
          position: 'top',
          distance: 10,
          color: '#fff',
        },
      },
      {
        data: typeYAxis,
        type: 'pictorialBar',
        barMaxWidth: '20',
        symbolPosition: 'end',
        symbol: 'diamond',
        symbolOffset: [0, '-50%'],
        symbolSize: [30, 12],
        zlevel: 2,
      },
    ],
    tooltip: {
      trigger: 'axis',
      show: false,
    },
  };
  myChart.setOption(option, true);
  window.onresize = function () {
    // 自适应大小
    myChart.resize();
  };
}

onMounted(() => {
  watch(
    () => props.listData,
    () => {
      setTimeout(() => {
        houseChart();
        typeChart();
      }, 100);
    },
    { deep: true, immediate: true }
  );
});
</script>

<style lang="scss" scoped>
#DisasterBearingBodyDataHouse {
  width: 100%;
  height: 230px;
  margin: -20px 0 0px 0;
}
#DisasterBearingBodyData {
  width: 100%;
  height: 230px;
  margin: -20px 0 0 0;
}
</style>
